<template>
  <a-popover
    trigger="click"
    placement="bottomLeft"
    :autoAdjustOverflow="true"
    :arrowPointAtCenter="true"
    :visible="hovered"
    overlayClassName="header-notice-wrapper"
    @visibleChange="handleHoverChange"
    :overlayStyle="{ width: '35%', top: '50px' }">
    <template slot="title">
      <div class="popoverTitleInfo">
        <b>消息中心</b>
        <img @click="()=>{hovered = false}"  src="@assets/close.png" alt="">
      </div>
    </template>
    <template  slot="content">
      <a-spin :spinning="loadding">
        <div style="border-bottom: 1px solid #d9d9d9;">
          <a-button-group style="margin-bottom:10px;">
            <auth-button type="primary" @click="showAnnounceList" >
              {{ $t('公告通知') }}
            </auth-button>
            <a-button @click="showHistoryVersionList" >
              {{ $t('系统版本') }}
            </a-button>
          </a-button-group>
          <span v-if="isAnnounceList" class="clearUnRead" @click="allReaded">
            <img  src="@assets/qingchu.png" alt="">
            清除未读</span>
        </div>
        <div class="contentInfo" v-if="isAnnounceList">
          <div class="announceListInfo" v-if="UN_READ_LIST.length>0">
            <div class="announceInfo" :key="index" v-for="(record, index) in UN_READ_LIST">
              <div class="titleInfo">
                <span class="announceTitle">{{ record.name }}</span>
                <span style="color:#aaa;font-size:12px">{{ moment(record.publishTime).format('YYYY-MM-DD') }} &nbsp; &nbsp;{{record.beforeDays==0?'今天':`${record.beforeDays}天前`}}</span>
              </div>
              <a-row :gutter="36">
                <a-col :md="19" :sm="18">
                  <div class="overflow" :title="record.content">{{ record.content }}</div>
                </a-col>
                <a-col :md="5" :sm="6">
                  <div class="checkBtn">
                    <span class="view" @click="viewDetail(record)">查看</span>
                    <span class="readed" v-if="record.readStatus">已读</span>
                    <span class="unRead" v-else>未读</span>
                  </div>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="emptyList" v-else>
            <img
              src="@/assets/nochartDate.png"
              alt
            />
            <p>{{ $t('noData') }}</p>
          </div>
        </div>
        <div class="contentInfo" v-else>
        <p class="historyRecord">平台版本升级记录</p>
        <a-steps v-if="historyRecordVersion.length>0" progress-dot :current="historyRecordVersion.length-1" direction="vertical">
          <a-step v-for="item in historyRecordVersion"  :key="item.id" >
            <template slot="title">
              <p style="color:#4488A6 ">{{ moment(item.publishTime).format('YYYY-MM-DD HH:mm:ss')}}</p>
              <b>{{item.name}}</b>
            </template>
            <template slot="description">
              {{item.content}}
            </template>
          </a-step>
        </a-steps>
         <div class="emptyList" v-else>
            <img
              src="@/assets/nochartDate.png"
              alt
            />
            <p>{{ $t('noData') }}</p>
          </div>
        </div>
      </a-spin>
    </template>
    <span class="header-notice" @click="fetchNotice">
      <a-badge :count="UN_READ" :offset="[0,5]" :number-style="{fontSize: '8px'}">
        <a-icon style="font-size: 18px; padding: 4px" type="bell" />
      </a-badge>
    </span> 
    <a-modal
      :width="450"
      :visible="visibleDetail"
      :title="viewTitle"
      @cancel="()=>visibleDetail=false"
      :footer="null"
    >
     <div class="ql-container">
        <div class="ql-editor">
            <div v-if="!!viewContent" v-html="viewContent"></div>
            <div v-else>'暂无数据'</div>
        </div>
      </div>
    </a-modal>  
  </a-popover>
</template>

<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import sysAnnounceApi from '@/api/modules/system/announce'
  import store from '@/store/'
  import { mapState, mapActions } from 'vuex'
  import moment from 'moment'
  export default {
    name: "HeaderNotice",
    components: {
    },
    data () {
      return {
        visibleDetail:false,
        viewTitle:'',
        viewContent:'',
        moment,
        isAnnounceList:true,
        historyRecordVersion:[],
        loadding: false,
        hovered: false,
        // UN_READ_LIST:[],
      }
    },
    computed: {
      ...mapState({
        UN_READ: state => state.sysAnnounce.UN_READ,
        UN_READ_LIST: state => state.sysAnnounce.UN_READ_LIST,
      })
    },
    created() {
      this.queryUnRead()
      this.getSysHistoryVersion()
    },
    methods: {
      ...mapActions(['queryUnRead']),
      fetchNotice () {
        if (this.loadding) {
          this.loadding = false
          return
        }
        this.loadding = true
        setTimeout(() => {
          this.loadding = false
        }, 200)
      },
      // 清除单个未读（未读=》已读）
      viewDetail(record){
        this.visibleDetail=true
        this.viewTitle=record.name;
        this.viewContent=record.content;
        sysAnnounceApi.updateSingleSysAnnounceState({id:record.id}).then((res) => {
          this.queryUnRead()
        })
      },
      // 清除未读（未读=》已读）
      allReaded(){
        sysAnnounceApi.updateAllSysAnnounceState().then((res) => {
          this.$message.success("全部已读");
          this.queryUnRead()
        })
      },
      getSysHistoryVersion(){
        sysAnnounceApi.getSysHistoryVersion().then((res) => {
          this.historyRecordVersion=res.data
          })
      },
      showAnnounceList(){
        this.isAnnounceList=true
      },
      showHistoryVersionList(){
        this.isAnnounceList=false
      },
      fetchNotice () {
        if (this.loadding) {
          this.loadding = false
          return
        }
        this.loadding = true
        setTimeout(() => {
          this.loadding = false
        }, 200)
      },
      handleHoverChange (visible) {
        this.hovered = true;
      }     
    }
  }
</script>

<style lang="css">
  .header-notice-wrapper {
    top: 50px !important;
  }
</style>
<style lang="less" scoped>
  ::v-deep .ant-badge-multiple-words {
     padding: 0 0px; 
  }
  .popoverTitleInfo{
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    b{
      font-size:1.6rem
    }
  }
  .contentInfo{
    height: 700px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .clearUnRead{
    float:right;
  }
  .clearUnRead:hover{
    color: #4488A6;
  }
  .announceListInfo{
    margin-top: 8px;
    .announceInfo{
      border-bottom: 1px solid #d9d9d9;
      .titleInfo{
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        margin-bottom: 8px;
        .announceTitle{
            font-weight: bold;
        }
      }
      .overflow {
      color: #666666;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 设置行数 */
      -webkit-box-orient: vertical;
      margin-bottom: 10px;
    }
    }
    .checkBtn{
      float: right;
      margin-top: 10px;
      .view{
        color: #4488A6;
        margin-right: 8px;
      }
      .readed{
        color: #999999;
      }
      .unRead{
        color: #4488A6;
      }
    }

  }
  .announceInfo:last-child{
    border-bottom: none
  }
  
  ::v-deep .ant-steps-dot .ant-steps-item-content {
    width: 80%
  }
  ::v-deep .ant-steps-item-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  .historyRecord{
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 30px;
    font-size:  1.5rem
  }
  ::v-deep .ant-steps {
    margin: 20px;
  }
  .emptyList{
    opacity: .2;
    font-size: 1.4rem;
    font-weight: 400;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    img {
      width: 32px;
      margin-bottom: 10px;
    }
  }
  .header-notice{
    display: inline-block;
    transition: all 0.3s;
    span {
      vertical-align: initial;
    }
  }
</style>